<template>
    <div class="register_wrap">
        <div class="register_box">
            <!-- 头像区域 -->
            <div class="avater_box">
                <img src="@a/img/logo.png" alt="">
            </div>
            <!-- 注册区域 -->
            <el-form ref="form" :model="form" label-width="70px" >
            <el-form-item label="用户名">
                <el-input v-model.trim="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <!-- <el-input v-model="form.password" ></el-input> -->
                <el-input placeholder="请输入密码" v-model.trim="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <!-- <el-input v-model="form.repeat_password" ></el-input> -->
                <el-input placeholder="请输入密码" v-model.trim="form.repeat_password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onRegister">注册</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// import request from '@/api/request.js';
import {req_register} from '@/api/registerLogin.js';
export default {
    data(){
        return {
        form: {
          name: '',
          password:'',
          repeat_password:'',
        }
        // 收集到用户名和密码之后将密码和重复密码进行对比 是否一致  发送注册请求 不一致 清空 请重新输入
        
      }
    },
    methods:{
        async onRegister(){
            console.log('给变量或者函数起名字一定要有含义')

            //收集到的用户名和密码
            console.log(
                this.form.name,this.form.password,this.form.repeat_password
                );

            if(this.form.password === this.form.repeat_password){
                console.log('发送Ajax请求')
                // 封装好的Ajax请求（axios）的文件 一般文件的名称netork api uttils
                // 回忆request出入四个参数method,url,arg,headerType 返回值是一个promise对象 异步微任务 就可以通过async await去解决异步问题 变为同步
                // let result=await request('post','/register',{
                //     user_name:this.form.name,
                //     password:this.form.password,
                // },'form');
                // 目的：如果是四个参数比较占用变量 将其变为一个对象
                // let result=await request(
                //     {
                //         method:'post',
                //         url:'/register',
                //         arg:{
                //             user_name:this.form.name,
                //             password:this.form.password,
                //         },
                //         headerType:"form",
                //     }
                // );
                let result=await req_register(
                    {
                        method:'post',
                        url:'/register',
                        arg: {
                            user_name:this.form.name,
                            password:this.form.password,
                        },
                        headerType: "form",
                    }
                )
                console.log(result);
                // 点击注册之后跳转到登录页面
                this.$router.push({
                    name:'login',
                })
            }else{
                console.log('请重新输入')
            }

            this.$message.error('请重新输入密码');
            this.form.password='';
            this.form.repeat_password='';
        },
        onReset(){
            console.log('重置');
            // 重置的意思就是让输入框为空
            this.form.name='';
            this.form.password='';
            this.form.repeat_password='';
        }
    }
}
</script>

<style lang="scss" scoped>
    .register_wrap{
        background-color: rgb(121, 206, 209);
        .register_box{
            width: 330px;
            height: 230px;
            background-color: aliceblue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .avater_box{
                img{
                    width: 80px;
                    height: 60px;
                    border: 3px solid white;
                    border-radius: 50%;
                    background-color: rgb(245, 248, 230);
                    box-shadow: 0 0 15px gainsboro;
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%,-57%);
                }
            }
        }
        .el-form{
            height: 30px;
            position: absolute;
            top: 30px;
        }
    }
</style>